<template>
    <!-- 上传文件流给父级 -->
    <el-upload ref="upload" action="#" v-model:file-list="fileList" list-type="picture-card" :class="{ hide_box: upload_btn }" 
      :disabled="disabledFather"
        accept=".jpg,.jpeg,.png,.gif,.bmp,.webp"  :auto-upload="false"
        :on-change="FileChange">

        <el-icon>
            <Plus />
        </el-icon>
        <template #file="{ file }">
            <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <el-icon><zoom-in /></el-icon>
                    </span>

                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </span>
                </span>
            </div>
        </template>
    </el-upload>

    <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import type { UploadFile, UploadProps, UploadInstance } from 'element-plus'
const emit = defineEmits(['fileUp'])
const props=defineProps({
    disabledFather:{
        type:Boolean,
        default:false
    }
})
const fileList = ref<any>([
])


const upload = ref<UploadInstance>()
const upload_btn = ref(false)
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    console.log(rawFile, "+++>>>>>>>>>>>>");

    if (rawFile.size / 1024 / 1024 > 1) {
        ElMessage.error('上传的图片不能大于1 MB')
        return false
    }
    return true
}
const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
}
const handleRemove = (file: UploadFile) => {
    upload_btn.value = false
    upload.value!.clearFiles()
    fileList.value = []

    emit('fileUp', fileList.value)
}
const FileChange: UploadProps['onChange'] = async (uploadFile: any) => {
    console.log(uploadFile, "+++>>>>>>>>>ttttttttttt>>>");
    try {
        const res = await beforeAvatarUpload(uploadFile)
        if (!res) {
            fileList.value = []
            return true
        }
        console.log(uploadFile,uploadFile.raw, "+++>>>>>>>>>true true>>>");
        fileList.value = []

        fileList.value.push(uploadFile)

        const arr = []
        arr.push(uploadFile.raw)
        upload_btn.value = true
        emit('fileUp', arr)
    } catch (error) {
        console.log(error);

    }

}

const clearFile = () => {
    upload_btn.value = false
    upload.value!.clearFiles()
    fileList.value = []
}
const newUrl = (url: string, flag: boolean) => {
    upload_btn.value = true
    console.log(url, flag);

    if (flag) {
        fileList.value = [
            {
                url: url
            }
        ]
    } else {
        fileList.value[0].url = url
    }

    console.log(fileList.value, "==KKKK");


}
// 编辑的时候 给一个后端的值
defineExpose({
    clearFile,
    newUrl
})


</script>

<style lang="scss" scoped>
.hide_box {
    :deep(.el-upload--picture-card) {
        display: none;
    }
}
</style>